<template>
  <div>
    <header>
      这里是通用头部
      <div>
        <router-link to="list">点击跳转列表</router-link>
        <div></div>
        <router-link :to="{ name: 'userDetail' }">点击详情</router-link>
        <div>跳转列表</div>
        <div @click="goDetail">跳转详情</div>
      </div>
    </header>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
console.log(router);
console.log("route", route);
const passQuery = {
  a: 1,
  b: 2,
};
const goDetail = () => router.push({ name: "userDetail", query: passQuery });
// const goDetail1 = () => router.push("/user/detail");
</script>
<style>
header {
  height: 50px;
  padding: 20px;
  text-align: center;
  /* background-color: blue; */
}
</style>
